<template>
    <v-selectpage v-model="currentValue" :data="data" :params="params" :search-field="searchField"
                  :key-field="keyField" :show-field="showField" @values="change" ref="selectPage"
                  :result-format="resultFormat" :placeholder="placeholder" :title="title"
                  :class="changed ? 'inputClass' : '{}'"
    ></v-selectpage>
</template>

<script>
    export default {
        name: "SelectPage",
        props: {
            value: {
                type: [String, Number],
                default() {
                    return ''
                }
            },
            data: {
                type: String,
                default() {
                    return ''
                }
            },
            params: {
                type: Object,
                default() {
                    return {}
                }
            },
            searchField: {
                type: String,
                default() {
                    return ''
                }
            },
            keyField: {
                type: String,
                default() {
                    return ''
                }
            },
            showField: {
                type: String,
                default() {
                    return ''
                }
            },
            changed: {
                type: Boolean,
                default() {
                    return false
                }
            },
            ownResultFormat: {
                type: Function,
                default() {
                    return () => {
                        return {
                            totalRow: 0,
                            list: []
                        }
                    }
                }
            },
            placeholder: {
                type: String,
                default() {
                    return ''
                }
            },
            title: {
                type: String,
                default() {
                    return ''
                }
            }
        },
        computed: {
            currentValue: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('update:value', val);
                }
            }
        },
        methods: {
            change(val) {
                this.$emit('selectChanged', val)
            },
            resultFormat(response) {
                return this.ownResultFormat(response)
            }
        }
    }
</script>

<style scoped>

</style>